<template>
  <div class="h-full flex flex-col">
    <div class="flex-grow overflow-hidden">
      <au-table
        ref="tableRef"
        v-bind="gridRecordOption"
        @actionClick="actionClick"
      >
        <template #topWrap>
          <div class="text-[#242930]">
            {{ t("device_update.software_record.title") }}
          </div>
        </template>
        <template #store_default="{ row }">
          {{ storeKeyValue[row.business_id] }}
        </template>

        <template #link_default="{ row }">
          <el-link :href="row.link" target="_blank" type="primary"
            >{{ t("device_update.download") }}
          </el-link>
        </template>
      </au-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import { softwareUpgradeGetRecordList } from "@/api/factory/device";
import { useGlobal } from "@pureadmin/utils";
import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
import { AuTable } from "@/components/AuTable";
import { ACTION_TYPE, PropDefines } from "@/components/AuTable/type";
import { GetListParamProp } from "@/api/user";
import { AuForm } from "@/components/AuForm";
import { selectProps } from "@/components/AuForm/type";
import { businessGetList } from "@/api/factory/business";
import { useI18n } from "vue-i18n";

defineOptions({
  name: "FactorySoftwareRecord"
});

const { t } = useI18n();
const route = useRoute();
const { $storage } = useGlobal<GlobalPropertiesApi>();
const router = useRouter();

const tableRef = ref();
const storeKeyValue = ref({});
let deviceStatus = "";

const formList = ref<[selectProps]>([
  {
    type: "select",
    label: "device_update.software_record.form.operation",
    key: "deviceStatus",
    placeholder: "device_update.software_record.form.operation_placeholder",
    labelKey: "label",
    valueKey: "value",
    emptyValues: [null, undefined],
    options: [
      {
        value: "",
        label: "device_update.software_record.form.all"
      },
      {
        value: 1,
        label: "device_update.software_record.form.lock"
      },
      {
        value: 0,
        label: "device_update.software_record.form.unlock"
      }
    ],
    defaultValue: deviceStatus,
    onChange: (val: string) => {
      deviceStatus = val;
      search();
    }
  }
]);
const gridRecordOption = reactive<PropDefines>({
  isServerPage: true,
  columns: [
    {
      field: "business_name",
      title: "device_update.table.business_name",
      minWidth: 120,
      align: "center",
      slots: {
        default: "store_default"
      },
      exportMethod: ({ row }) => {
        return storeKeyValue.value[row.business_id];
      }
    },
    {
      field: "device_type",
      title: "device_update.table.device_type",
      minWidth: 120,
      align: "center"
    },
    {
      field: "device_model",
      title: "device_update.table.device_model",
      minWidth: 160,
      align: "center"
    },
    {
      field: "version",
      title: "device_update.table.version",
      minWidth: 120,
      align: "center"
    },
    {
      field: "link",
      title: "device_update.table.upgrade_package",
      width: 110,
      slots: {
        default: "link_default"
      },
      align: "center"
    },
    {
      field: "size",
      title: "device_update.table.size",
      minWidth: 90,
      align: "center"
    },
    {
      field: "content",
      title: "device_update.table.upgrade_content",
      minWidth: 180,
      align: "center"
    },
    /* {field: 'is_force', title: '强制升级', minWidth: 90, templet: '#listData-is_force', align: 'center'}, */
    {
      field: "update_time",
      title: "device_update.table.update_time",
      width: 170,
      align: "center"
    }
  ],
  dataSource: [],
  actions: [ACTION_TYPE.REFRESH],
  fetchConfig: {
    query: {
      service: (params: GetListParamProp<{}>) => {
        const paramData = {
          filter: {
            upgrade_id: Number(route.query?.id)
          },
          ...params
        };

        return softwareUpgradeGetRecordList(paramData);
      },
      param: () => {
        return {
          // deviceId: Number(route.query["id"]),
          // ...formRef.value.getFormData()
        };
      }
    }
  }
});

const formRef = ref();

const toPrevPage = () => {
  router.push({
    name: "FactoryCheckUpdate"
  });
};

const getStoreData = async () => {
  const res = await businessGetList({
    start_page: 1,
    size: 0
  });
  for (const item of res.data) {
    storeKeyValue.value[item.id] = item.brand;
  }
};

function storageConfigureChange<T>(key: string, val: T): void {
  const storageConfigure = $storage.configure;
  storageConfigure[key] = val;
  // $storage.configure = storageConfigure;
}

const search = () => {
  tableRef.value.refresh();
};

const actionClick = ({ key }) => {
  switch (key) {
    case ACTION_TYPE.REFRESH:
      search();
      break;
    case ACTION_TYPE.DOWNLOAD:
      const $table = tableRef.value.vxeGridRef;
      $table.exportData({
        filename: t("device_update.software_record.export_filename"),
        type: "csv",
        isHeader: true
      });
  }
};

onBeforeMount(() => {
  getStoreData();
});

// onMounted(() => {
//   storageConfigureChange("hideTabs", true);
//   emitter.emit("tagViewsChange", true as unknown as string);
// });
//
// onBeforeRouteLeave((to, from, next) => {
//   storageConfigureChange("hideTabs", false);
//   emitter.emit("tagViewsChange", false as unknown as string);
//   next();
// });
</script>

<style lang="scss" scoped>
.device-table {
  :deep(table) {
    background: #f5f9ff !important;
  }

  :deep(.el-table th.el-table__cell) {
    background: #f5f9ff;
  }

  :deep(.el-table tr) {
    background: #f5f9ff;
  }
}
</style>
